<!--  -->
<template>
<div class=''>
    <div>
    <!-- <div class="dijing">
      <el-button-group class="hidden-sm-and-down">
        <el-button type="primary" icon="el-icon-arrow-left" @click="fanhui">返回收益记录表</el-button>
      </el-button-group>
    </div>			 -->
    <div class="block searchBox">
              <el-col :span="24" class="operation">
                <div class="block">
                  <el-date-picker
                    class="timetable"
                    v-model="searchTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
              </el-col>
            </div>

            <el-col :span="24" class="exhibition">
              <div class="Thelistshows">
                <el-table :data="listData" stripe style="width: 100%">
                  <el-table-column  label="用户名" min-width="15%">
                     <template slot>{{userName.slice(0,11)}}</template>
                  </el-table-column>
                  <el-table-column
                    prop="real_amount"
                    label="充值金额"
                    min-width="10%"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="create_time"
                    label="充值时间"
                    min-width="25%"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <!-- 移动端 -->
              <div class="Foldingbar">
                <el-collapse accordion>
                  <el-collapse-item v-for="item in listData" :key="item.id">
                    <template slot="title">
                      <span>用户名:{{item.userName}}</span>
                      <span style="margin-left: 58px">
                        <span v-if="item.zhuangtai == false">
                          状态:已禁用
                        </span>
                        <span v-else>
                          状态:已启用
                        </span>
                      </span>
                    </template>
                    <div>账户充值:{{item.real_amount}}</div>
                    <div>账户消费:{{item.xiaofei}}</div>
                    <div>账户余额:{{item.yue}}</div>
                    <div>创建时间:{{item.create_time}}</div>
                    <div class="operatingButton">
                       <div v-if="item.zhuangtai == false">
                         操作:
                        <i class="el-icon-video-play ActionIcon" @click="startUsing(item.zhuangtai,item.yonhuming)"></i>
                        <el-button type="text" @click="EditButton(item.yonhuming,item.fanyongbili,item.quanxian)"><i class="el-icon-edit-outline ActionIcon"></i></el-button>
                        <router-link to="DetailPage">
                          <el-button type="text"><i class="el-icon-postcard ActionIcon"></i></el-button>
                        </router-link>
                        <router-view>
                        </router-view>
                      </div>
                      <div v-else>
                        操作:
                        <i class="el-icon-remove-outline ActionIcon" @click="forbidden(item.zhuangtai,item.yonhuming)"></i>
                        <el-button type="text" @click="EditButton(item.yonhuming,item.fanyongbili,item.quanxian)"><i class="el-icon-edit-outline ActionIcon"></i></el-button>
                        <router-link to="DetailPage">
                          <el-button type="text"><i class="el-icon-postcard ActionIcon"></i></el-button>
                        </router-link>
                        <router-view>
                        </router-view>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              <div class="paging">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync = "currentPage4"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
              <el-dialog title="编辑权益" :visible.sync="centerDialogVisible1" width="350px">
                  <div class="userNameptbox">
                    <span>
                      用户名
                    </span>
                    <el-input v-model="qxyhm" placeholder="请输入内容" disabled></el-input>
                  </div>
                  <div class="CommissionRatiobox">
                    <span>
                      返佣比例
                    </span>
                    <el-input v-model="CommissionRatio" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="userLevelbox">
                    <span>修改级别</span>
                    <el-select v-model="userLevel" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="ptyhan">
                    <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="CommissionRatioqd">确 定</el-button>
                  </div>
              </el-dialog>
              <el-dialog title="添加普通用户" :visible.sync="AddRegularUsers" width="350px">
                  <div class="userNameptbox">
                    <span>
                      账号名称
                    </span>
                    <el-input type="input" v-model="yonhuming1" placeholder="用户名必须为11位手机号"></el-input>
                  </div>
                  <div class="CommissionRatiobox">
                    <span>
                      用户密码
                    </span>
                    <el-input v-model="mima" placeholder="密码长度不能小于6个字符" show-password></el-input>
                  </div>
                  <div class="CommissionRatiobox">
                    <span>
                      确认密码
                    </span>
                    <el-input v-model="chongfumima" placeholder="密码长度不能小于6个字符" show-password></el-input>
                  </div>
                  <div class="ptyhan">
                    <el-button @click="AddRegularUsers = false">取 消</el-button>
                    <el-button type="primary" @click="addUsers(yonhuming1,mima,chongfumima)">确 定</el-button>
                  </div>
              </el-dialog>
            </el-col>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import moment, { duration, locales } from 'moment';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
      userName:this.$route.query.keyword,
      listData:[],
      begin_time:'',
      end_time:'',
      page_index:1,
      page_cnt:10,
      value1: "",
      value2: "",
      tableData: [],
      kaishishu: 0,
      jieshushu: 10,
      currentPage4: 1,
      username: "",
      searchTime: [],
      newVal:"",
      oldVal:"",
      total:0,
      catalog :10,
      zuorixingzen:"",
      jinrixinzen:"",
      jinrixinzen:"",
      zongrenshu:"",
      zhuangtai1:"",
      userNamept:"",
      CommissionRatio:"",
      userLevel:"",
      centerDialogVisible1: false,
      AddRegularUsers:false,
      qxyhm:"",
      yonhuming1:"",
      mima:"",
      chongfumima:"",
      options: [{
        value: '0',
        label: '普通用户'
      }, {
        value: '2',
        label: '代理用户'
      },],
      value: '',
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {

},
//方法集合
methods: {
    //一页显示几条
    async handleSizeChange(val){
      this.page_cnt=val
      this.Update()
    },
    //跳转到几条
    handleCurrentChange(val) {
      this.page_index
      this.Update()
    },
    startUsing(zhuangtai,yonhuming){
      console.log(zhuangtai)
      console.log(yonhuming)
      this.zhuangtai1 = 1
      this.yonhuming = yonhuming
      this.operate()
    },
    forbidden(zhuangtai,yonhuming){
      this.zhuangtai1 = 0
      this.yonhuming = yonhuming
      this.operate()
    },
    async operate() {
      const [err, res] = await this.$http.request({
        url: "yonghucaozuo/",
        method: "POST",
        data: {
          yonhuming : this.yonhuming,
          zhuangtai : this.zhuangtai1
        },
      });
      if (err) return;
      this.Update();
      console.log(res);
    },
    EditButton(yonhuming,fanyongbili,quanxian){
      this.centerDialogVisible1 = true;
      this.qxyhm = yonhuming;
      this.CommissionRatio = fanyongbili;
      this.userLevel = quanxian.toString();
    },
    async CommissionRatioqd(yonhuming ){
      this.centerDialogVisible1 = false;
      this.$message({
        message: '修改成功',
        type: 'success'
      });
      this.shiyan();
      this.Update();
    },
    async shiyan(){
      const [err, res] = await this.$http.request({
        url: "xiugaiquanxian/",
        method: "POST",
        data: {
          yonhuming : this.qxyhm,
          fanyongbili : this.CommissionRatio,
          quanxian : this.userLevel,
        },
      });
      if (err) return;
    },
    // 生命周期
    async Update() {
      let data ={
        begin_time:this.begin_time,
        end_time:this.end_time,
        page_index:this.page_index,
        page_cnt:this.page_cnt,
        user_id:this.$route.query.keyword
      }
      const [err, res] = await this.$http.request({
        url: "/payRecord",
        method: "GET",
        data
      });
      if (err) return;
      console.log(res.data.data.payOrder_list)
      this.listData=res.data.data.payOrder_list
      this.total=res.data.data.list_cnt
      this.listData.map(item=>{
        return item.create_time=item.create_time.replace('T',' ').slice(0,19)
      })
    },

    async addUsers(yonhuming1,mima,chongfumima){
        console.log(yonhuming1)
        this.yonhuming=yonhuming1;
        this.mima = mima;
        this.chongfumima = chongfumima;
        console.log(yonhuming1)
        if(this.yonhuming == ""){
          this.$message.error('账号名称不能为空');
          return
        }
        if (!/^1[34578]\d{9}$/.test(this.yonhuming)) {
           this.$message.error('请填写正确的手机号');
          return
        }
        if(this.mima == ""){
          this.$message({
            message: '用户密码不能为空',
            type: 'warning'
          });
          return
        }
        if(this.mima.length < "6"){
          this.$message({
            message: '用户密码小于6位数',
            type: 'warning'
          });
          return
        }
        if(this.chongfumima == ""){
          this.$message({
            message: '确认密码不能为空',
            type: 'warning'
          });
          return
        }
        if(this.chongfumima.length < "6"){
          this.$message({
            message: '确认密码小于6位数',
            type: 'warning'
          });
          return
        }
        if(this.chongfumima !== this.mima ){
          this.$message({
            message: '2次密码不一样',
            type: 'warning'
          });
          return
        }
        this.addUsers1()
    },
    async addUsers1(){
        const [err, res] = await this.$http.request({
        url: "tianjiaputongyonghu/",
        method: "POST",
        data: {
          yonhuming : this.yonhuming,
          mima : this.mima ,
          chongfumima : this.chongfumima ,
        },});
        if (err) return;

    },

    //点击搜索触发
    search(){
      console.log(this.searchTime);
      this.begin_time=this.searchTime[0]
      this.end_time=this.searchTime[1]
      this.Update();
    },
    // fanhui() {
    //   this.$router.push("/domesticconsumer");
    // },

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    // console.log(this.$route.query.keyword)
    console.log(this.userName);
    this.Update()
    // this.timeChange()
},
//生命周期 - 挂载完成（可以访问DOM元素）

mounted() {

},
}
</script>
<style scoped lang='stylus'>
  @import './detailPage.styl'
</style>
